<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>短租自驾</title>
<link rel="stylesheet" href="${cxt }/css/yk_base.css" />
<link rel="stylesheet" href="${cxt }/css/yk_duan_shuan.css" />
<script type="text/javascript" src="${cxt }/js/jquery-3.2.1.js" ></script>
<script type="text/javascript" src="${cxt }/js/yk_myCenter_duan.js" ></script>
<script src="${cxt }/js/ls-base.js"></script>
	
<script>
		var xbs;
		$(function(){
			$(".subbox button").click(function(){
				var _this=this;
				
				$.ajax({
					dataType:"json",
					url:"${cxt}/enterprise/ordermanager/optionquery",
					data:{startTime:$("#fromDate").val(),endTime:$("#toDate").val(),status:$(_this).text(),size:4,curr:1},
					success:function(data){
						$("#content").empty();
						createCon(data);
					}
				})
			})
			function createCon(data){
				console.log(data);
				
				var list=data.ist;
				console.log(list);
				
				var strcon='';
				for(var i=0;i<list.length;i++){
				strcon+='<tr>'+
						'									<td style="text-align:center;">'+
						'										<p style="text-indent:2em;">订单号：'+list[i].eo_order_id+'</p>'+
						'									</td>'+
						'									<td>'+
						'								'+
						'										'+
						'									</td>'+
						'									<td>'+
						'										<div class="ol-caraddress" style="cursor: default;">'+
						'											<p class="qhicon">'+
						'												<i class="zc_fetch_i"></i>车时间'+
						'												'+$.getDate(list[i].eo_reserve_get_time.time)+'	'+
						'											</p>'+
						'											<p class="qhtime"></p>'+
						'											<p class="qhicon">'+
						'												<i class="zc_giveback_i"></i>车时间'+
						'												'+list[i].eo_fact_return_time+'	'+
						'											</p>'+
						'											<p class="qhtime"></p>'+
						'											<div class="ol-trace-bd">'+
						'												<i></i>'+list[i].eo_fact_return_time+''+
						'											</div>'+
						'										</div>'+
						'									</td>'+
						'									<td>'+
						'										<div class="ol-aggregate" style="height: 100px;">'+
						'											￥'+list[i].sumCash+''+
						'											<span></span>'+
						'											'+
						'										</div>'+
						'									</td>'+
						'									<td>'+
						'										'+
						'										<span class="s-gray" style="color: #93939e;">${order.eo_order_status}</span>'+
						'										<a href="${cxt }/enterprise/index?content=ls_enterprise/myCenter/orderdetail" class="a-view" target="_blank">查看订单</a>'+
						'									</td>'+
						'									</tr>';
					
				}
				
				$("#content").empty().append(strcon);
			}
			
			
			$("#query").click(function(){
				$.ajax({
					dataType:"json",
					url:"${cxt}/enterprise/ordermanager/optionquery",
					data:{startTime:$("#fromDate").val(),endTime:$("#toDate").val(),status:"全部",size:4,curr:1},
					success:function(data){
						createCon(data);
					}
				})
			})
			var currpage=1;
			var pagenum=2;
			$(".sz_page button:eq(0)").click(function(){
				$(".sz_page button").removeClass("linkactive");
				$(this).addClass("linkactive");
				currpage=1;
				$.ajax({
					dataType:"json",
					url:"${cxt}/enterprise/ordermanager/optionquery",
					data:{startTime:$("#fromDate").val(),endTime:$("#toDate").val(),status:"全部",size:4,curr:1},
					success:function(data){
						createCon(data);
					}
				})
			})
			$(".sz_page button:eq(1)").click(function(){
				
				if(currpage>1){
					currpage=currpage-1;
				$.ajax({
					dataType:"json",
					url:"${cxt}/enterprise/ordermanager/optionquery",
					data:{startTime:$("#fromDate").val(),endTime:$("#toDate").val(),status:"全部",size:4,curr:currpage},
					success:function(data){
						createCon(data);
					}
				})
				}
			})
			$(".sz_page button:eq(2)").click(function(){
				
				if(currpage<pagenum){
					currpage=currpage+1;
				$.ajax({
					dataType:"json",
					url:"${cxt}/enterprise/ordermanager/optionquery",
					data:{startTime:$("#fromDate").val(),endTime:$("#toDate").val(),status:"全部",size:4,curr:currpage},
					success:function(data){
						createCon(data);
					}
				})
				}
			})
			
		})	
		function XBSPage(curr,size,pageNum,conStr,data){
			this.curr=curr;
			this.size=size;
			this.conStr=conStr;
			this.pageNum=pageNum;
			this.linkContainer=$("#pagelink");
			this.data=data;
		
		}
		XBSPage.prototype.createLink=function(){
			if(this.pageNum>=4){
				this.linkContainer=
				this.linkContainer.empty().append('<button>上一页</button>'+
						'							<button>1</button>'+
						'							<button>2</button>'+
						'							<button>3</button>'+
						'							<button>4</button>'+
						'							<button>下一页</button>');
				if(this.curr==this.linkContainer.find("button:eq(1)").text()){
					this.linkContainer.find("button:eq(0)").remove();
					var _this=this;
					$("#pagelink").on("click","button:eq(1)",function(){
						var list=data.ist;
						for(var i=0;i<list.length;i++){
							
						}
						xbs=new XBSPage(1,4,4,strcon,{startTime:$("#fromDate").val(),endTime:$("#toDate").val(),status:"全部",size:4,curr:2});
					})
				}
				if(this.curr==this.linkContainer.find("button:eq(4)").text()){
					this.linkContainer.find("button:eq(5)").remove();
				}
			}
		}
		XBSPage.prototype.createCon=function(){
			$("#content").empty().append(this.conStr);
		}
		
</script>
<style>
	.sz_page a{
		cursor:pointer;
	}
	.subbox button{
	height: 34px;
	line-height: 34px;
	font-size: 14px;
	min-width: 90px;
	color: black;
	border: 1px solid #e9ebee;
	background-color: #f8f8fa;
	color: #93939e;
	text-align: center;
	cursor:pointer;
}
.subbox button:hover{
	    background-color: #fac10a;
}
#pagelink button{
	 display: inline-block;
    line-height: 28px;
    border: 1px solid #e9ebee;
    color: #93939e;
    min-width: 29px;
    text-align: center;
    vertical-align: middle;
    margin-left: -4px;
}
.linkactive{
	background:#fff;
	color:#000;
}
</style>
</head>
<body>
	<div style="width:100%;background: #F2F3F5;">
			<div class="duan">
				<div class="head">
					<span class="order" style="color:#808080 ;">车组订单</span>
					<div class="zc_box">
						<input type="date" id="fromDate" class="w175 zc_iptcalendar"/>
						<span>-</span>
						<input type="date" id="toDate" class="w175 zc_iptcalendar"/>
						<a style="display:inline-block;"><input type="button" value="查询" class="zc_gray_sub pointer" id="query"/></a>
						<input type="button" value="清除" class="zc_blue_sub pointer"/>
					</div>
					<div class="subbox fl">
						<button class="fl"  id="all">全部</button>
						<button class="fl"  id="wait">已预约</button>
						<button class="fl" id="order">租赁中</button>
						<button class="fl"  id="ing">已完成</button>
						<button class="fl"  id="end">已取消</button>
						<div class="cl"></div>
					</div>
					<div class="content" >
						<table class="zc_table_order" cellpadding="0" cellspacing="0">
							<thead>
								<tr>
									<th class="al" width="167px">订单信息</th>
									<th width="197"></th>
									<th width="263" class="al">取/还车信息</th>
									<th width="110" class="ac">应扣款</th>
									<th width="100" class="ac">订单状态</th>
								</tr>
							</thead>
							<tbody id="content">
								<c:forEach items="${orders}" var="order">
									<tr>
									<td style="text-align:center;">
										<p style="text-indent:2em;">订单号：${order.eo_order_id}</p>
									</td>
									<td>
								
										
									</td>
									<td>
										<div class="ol-caraddress" style="cursor: default;">
											<p class="qhicon">
												<i class="zc_fetch_i"></i>车时间
												${order.eo_reserve_get_time }	
											</p>
											<p class="qhtime"></p>
											<p class="qhicon">
												<i class="zc_giveback_i"></i>车时间
												${order.eo_fact_return_time }	
											</p>
											<p class="qhtime"></p>
											<div class="ol-trace-bd">
												<i></i>${order.eo_fact_return_time }
											</div>
										</div>
									</td>
									<td>
										<div class="ol-aggregate" style="height: 100px;">
											￥${order.sumCash }
											<span></span>
											
										</div>
									</td>
									<td>
										
										<span class="s-gray" style="color: #93939e;">${order.eo_order_status}</span>
										<a href="${cxt }/enterprise/index?content=ls_enterprise/myCenter/orderdetail" class="a-view" target="_blank">查看订单</a>
									</td>
									</tr>
								</c:forEach>
							</tbody>
						</table>
					</div>
					<div class="sz_page_box">
						<div class="sz_page">
							<button class="linkactive">首页</button>
							<button >上一页</button>
							<button >下一页</button>
							<button >尾页</button>
						</div>
					</div>
				<div class="orderstate_bd">
					<h3>订单状态说明</h3>
					<ul>
						<li>
							<span class="s-green">已预定</span>
							<p>订单已确认，尚未提车</p>
						</li>
						
						<li>
							<span class="s-blue">租赁中</span>
							<p>车辆正在租赁过程中</p>
						</li>
						<li>
							<span class="s-yellow">已完成</span>
							<p>已还车，订单结算完毕</p>
						</li>
						<li>
							<span class="s-grey">已取消</span>
							<p>订单已经取消</p>
						</li>
					</ul>
				</div>
				<div class="notice_bd">
					<h3>注意事项</h3>
					<p>1.修改或取消订单，请您尽早致电400 616 6666申请，送车上门或服务点订单请至少在我们的工作时间内（08:00-20:00）提前2小时修改；</p>
					<p>2. 预付订单，逾时不履行或取消的，退还您预付款中的基本保险、手续费及可选服务费款项，已付费用将作为违约金恕不退还；</p>
					<p>3. 系统将为您保留一年之内的订单，如需查询更早的订单，请致电24小时热线。</p>
				</div>
			</div>
			
		</div>
</body>
</html>